<template>
  <view class="favorites-container">
    <view class="header">
      <text class="title">我的收藏</text>
    </view>

    <view class="song-list">
      <view 
        class="song-item" 
        v-for="song in favoriteSongs" 
        :key="song.id"
        @click="playSong(song)"
      >
        <text class="song-title">{{ song.title }}</text>
        <text class="song-artist">{{ song.artist }}</text>
      </view>

      <view v-if="favoriteSongs.length === 0" class="empty-tip">
        <text>暂无收藏歌曲</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favoriteSongs: []
    }
  },
  onShow() {
    this.loadFavorites()
  },
  methods: {
    async loadFavorites() {
      try {
        const res = await uni.request({
          url: '/api/favorite',
          method: 'GET'
        })
        
        if (res[0].statusCode === 200) {
          this.favoriteSongs = res[0].data
        }
      } catch (error) {
        console.error('获取收藏列表失败:', error)
      }
    },
    playSong(song) {
      // 跳转到播放页面
      uni.navigateTo({
        url: `/pages/player/index?songId=${song.id}`
      })
    }
  }
}
</script>

<style>
.song-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.song-title {
  font-size: 16px;
  color: #333;
}

.song-artist {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.empty-tip {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
</style>